<template>
  <el-dialog v-model="open">
    <div style="display: flex; justify-content: center; align-items: center;">
      类型::&nbsp;&nbsp;&nbsp;
      <el-radio v-model="data.type" :label="'circle'">圆型图</el-radio>
      <el-radio v-model="data.type" :label="'point'">六角图</el-radio>
    </div>
    <hr/>

      <!--    展示区-->
    <RadarChart :master-id="props.masterId" :six-point-data="data?.point" v-if="data.type === 'point'">
    </RadarChart>

      <Circle style="display: flex; justify-content: center;" :sonValue="data.circle" v-if="data.type === 'circle'" ></Circle>

    <h3>选项</h3>
    <div v-for="(item, index) in data.circle.options" :key="index" v-if="data.type === 'circle'" class="input-container">
      <input type="text" class="input1" v-model="item.type" placeholder="类型名" >
      <el-input-number
          v-model="item.value"
          :min="0"
          :max="100"
          placeholder="对应值"
          class="input2"
          style="margin-left: 10px; margin-right: 10px;"/>
    </div>

    <div v-for="(item, index) in data.point.options" :key="index" v-if="data.type === 'point'" class="input-container">
      <input type="text" class="input1" v-model="item.name" placeholder="类型名" >
      <el-input-number
          v-model="item.value"
          :min="0"
          :max="100"
          placeholder="现值"
          class="input2"
          style="margin-left: 10px; margin-right: 10px;"/>
      <el-input-number
          v-model="item.max"
          :min="0"
          :max="100"
          placeholder="最大值"
          class="input2"
          style="margin-left: 10px; margin-right: 10px;"/>
    </div>

    <template #footer>
      <el-button @click="open = false"> 取消</el-button>
      <el-button type="primary" @click="handleSubmit"> 确定</el-button>
    </template>
  </el-dialog>
</template>


<script setup lang="ts">
import {computed, type PropType, reactive, ref, watch} from "vue";
import type {CircleDataInter, StatisticOption, StatisticPointOption} from "@/type/novel/circle";
import type {SixPointProps} from "@/api/types/novel/detailMode";
import RadarChart from "@/views/novel/character/components/middle/statistics/SixPoint.vue";
import Circle from "@/views/novel/character/components/middle/statistics/Circle.vue";
import type {CirclePointForm, CirclePointQuery} from "@/api/types/statistics/circlePoint";
import {ElMessage} from "element-plus";
import {createPowerPointApi, getPowerPointDetailApi, updatePowerPointApi} from "@/api/modules/statistics/powerPoint";

let open = ref();

let emit = defineEmits(['refreshMiddle'])

let data = reactive({
  id: Object as any ,
  circle: {
        labels: ['代码', '游戏', '性', '学习', '沟通'],
        datasets: [
          {
            label: '圆形统计图',
            data: [10, 20, 30, 30, 10], // 数据值 总数值为100
            backgroundColor: ['#FFCC99', '#99CCFF', '#FFFF99', '#FF99CC', '#CCFF99']
          }
        ],
       options: []
    } as CircleDataInter,
  point: {
      values: [3, 4, 5, 2, 4, 3],
      indicator: [
        { name: '速度', max: 5 },
        { name: '力量', max: 5 },
        { name: '反应', max: 5 },
        { name: '耐力', max: 5 },
        { name: '智力', max: 5 },
        { name: '生存', max: 5 },
      ],
      title:'能力雷达图',
      options:[]
  } as unknown as SixPointProps,
  type: 'circle' as string
})

let props = defineProps({
  masterId: Number,
  fromData: {
    type: String,
    default: ''  // 默认值为空字符串
  },
  type:{
    type: String,
    default: ''  // 默认值为空字符串
  }
})

let getStatisticData = () => {
  return JSON.parse(props.fromData);
}

let initData = ()=>{
  if (props.fromData !== ''){
    data = JSON.parse(props.fromData);
    // let labels = orginal?.labels
    // let datas = orginal?.datasets[0]?.data
    // let options = []
    // for (let i = 0; i < datas.length; i++) {
    //   options.push({'type':labels[i] , 'value':datas[i]})
    // }
    //只做获取数据赋值处理
    // data = orginal
  }

  //初始化处理
  let labels = data?.circle?.labels
  let datas = data?.circle?.datasets[0]?.data
  let options = [];  // 初始化为空数组
  for (let i = 0; i < datas.length; i++) {
    let tests = {  // 定义 tests 对象
      type: labels[i],
      value: datas[i]
    };
    options.push(tests);  // 添加到 options 数组中
  }

  if (data?.circle) {
    data.circle.options = options;
  }


  let indicator: { name: string, max: number }[] = data?.point?.indicator || [];
  let values: number[] = data?.point?.values || [];
  let optionsPoint: StatisticPointOption[] = [];

  if (indicator.length > 0) {  // 确保 indicator 数组有值
    for (let i = 0; i < indicator.length; i++) {
      let tests: StatisticPointOption = {
        name: indicator[i].name,  // 不需要使用 ?. 直接访问
        value: values[i],         // 直接访问 values[i]
        max: indicator[i].max     // 直接访问 max
      };
      optionsPoint.push(tests);
    }
  }

  if (data?.point) {  // 检查 data.point 是否存在
    data.point.options = optionsPoint;  // 赋值给 data.point.options
  }

}

initData()

let showData = ()=>{
  console.log('data?.circle?.options',data?.circle?.options)
  console.log('data?.circle?.sdaf',data?.circle)
}

let openStaticDialog = (id :any) => {
  console.log('asdfwefasdfsdf',id)
  // 直接不变吧
  if (id !== 'null'){
    // getPowerPointDetailApi({id: id}).then((res) => {
    //    data = JSON.parse(res?.data?.dataJson ?? '')
    // })
    data.id = id
    open.value = true;
    return
  }
  data.id = 'null'
  open.value = true;
}

let handleSubmit = ()=>{
  //直接整个数据保存压缩过去
  let saveTarget : CirclePointForm = {
    id: data.id,
    belongId : props?.masterId,
    dataJson : JSON.stringify(data),
    ext : data?.type
  }
  if (data.id !== 'null'){
    updatePowerPointApi(saveTarget).then((res) => {
      ElMessage.success('保存成功')
    })
    emit('refreshMiddle')
    open.value = false
    return
  }

  saveTarget.id = undefined
  createPowerPointApi(saveTarget).then((res) => {
     ElMessage.success('保存成功')
  })
  emit('refreshMiddle')
  open.value = false
}

//监控圆集合
watch(() => data.circle.options,
    (newvalue: any) => {
      let labels: string[] = [];
      let datas = [];

      for (let i = 0; i < newvalue.length; i++) {
        labels.push(newvalue[i].type);
        datas.push(newvalue[i].value);
      }

      // 确保 data.circle 存在
      if (data?.circle) {
        console.log('asdfasdf',newvalue);
        console.log('asdfasdf',labels);
        console.log('asdfasdf',datas);


        data.circle.labels = labels; // 给 labels 赋值
        if (data.circle.datasets && data.circle.datasets.length > 0) {
          data.circle.datasets[0].data = datas; // 给 datasets[0].data 赋值
        }

        console.log('asdfasdf',data.circle.labels);
        console.log('asdfasdf',data.circle.datasets[0].data);
      }
    },{deep:true});


//监控六角集合
watch(() => data.point.options,
    (newvalue: any) => {

      let values: number[] = [];
      let indicators = [];

      for (let i = 0; i < newvalue.length; i++) {
        values.push(newvalue[i].value);
        indicators.push({ name: newvalue[i].name, max: newvalue[i].max });
      }

      // 确保 data.point 存在
      if (data?.point) {

        data.point.values = values; // 给 values 赋值
        data.point.indicator = indicators; // 给 indicator 赋值
      }
    },{deep:true});



defineExpose({openStaticDialog})

</script>


<style scoped lang="scss">

.input-container {
  display: flex;
  align-items: center;
  margin-bottom: 10px;
}

.input1 {
  flex: 1;
  margin-right: 10px;
}

.input2 {
  flex: 2;
  margin-left: 10px;
}

</style>